<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../stripChart/chart.style.css">
<!--
Copyright 2007, 2008 Chris Hibbert.
Copyright 2005 CommerceNet Consortium, LLC.  All rights reserved.

This software is published under the terms of the MIT license, a copy
of which has been included with this distribution in the LICENSE file.
-->
</head>
<body onLoad="onload_actions()">

<script type="text/javascript" src="../experiment.js"></script>
<script type="text/javascript" src="../stripChart/stripchart.js"></script>
<script type="text/javascript"> top.chart = chartMaker(); </script>
<script type="text/javascript" src="jsunit/jstest-v1.js"></script>
<script type="text/javascript">
    roundLabel = 'Step';
</script>
<script type="text/javascript">

    var chartHeight = 400;
    var chartWidth = 400;
    var maxPrice = 100;
    var minPrice = 0;

    var dotSpacing = chartHeight / maxPrice;
    var dotHeight = 6;
    var dotWidth = 6;  // repeated in chart.style.css as: .chart li width
    var colSpace = 2;

    var majorUnit = 5;
    var minorUnit = 0;

    function setDivValues(scale, major, minor) {
        var doc;
        var chartFrame = getNamedIFrame('subFrame');
        if (chartFrame === null) {
            doc = document;
        } else {
            doc = chartFrame.document;
        }
        var scaleDiv = doc.getElementById("scale");
        var minorDiv = doc.getElementById("minorUnit");
        var majorDiv = doc.getElementById("majorUnit");
        scaleDiv.className = scale;
        majorDiv.className = major;
        minorDiv.className = minor;
        top.chart.updateScale();
        dotSpacing = chartHeight / scale;
    }

    function chart_length() {
        return findChart().getElementsByTagName('ul').length;
    }

    function absoluteVPos(yCoord) {
        return chartHeight - (yCoord * dotSpacing);
    }

    function absoluteHPos(xCoord) {
        var abs = xCoord * (dotWidth + colSpace);
        return abs;
    }

    function get_nth_tag(context, tagname, n) {
        var rv = context.getElementsByTagName(tagname)[n];
        if (!rv) throw "Couldn't find " + tagname + " number " + n;
        return rv;
    }

    function nth_column(column_number_from_zero) {
        var chart = findChart();
        if (!chart) throw "Couldn't find the chart";
        return get_nth_tag(chart, 'ul', column_number_from_zero);
    }

    function description_of_action(column_number_from_zero, row_number_from_zero) {
        var action = get_nth_tag(nth_column(column_number_from_zero), 'li', row_number_from_zero);
        return {x: action.offsetLeft, y: action.offsetTop, classname: action.className};
    }

    function assert_point(value, action, column, row) {
        var description = { x: absoluteHPos(column), y: absoluteVPos(value) - dotHeight/2, classname: action };
        assert_equal(description, description_of_action(column, row));
    }

    function build_test_chart_from_events() {
        var history = [
            { sell: "80,79,65,52", traded: "47", buy: "45,30", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" },
            { sell: "99,80,65", traded: "52", buy: "45,30,1", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" },
            { sell: "80,65", traded: "48", buy: "45,40", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" },
            { sell: "80,65", traded: "60", buy: "45,40", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" },
            { sell: "80", traded: "65", buy: "54,45,40", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" },
            { sell: "80,75", traded: "60", buy: "54,45,40", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" },
        ];
        top.chart.replaceLiveColumn({ sell: "80,75", buy: "54,45,40"});
        for (var i = 0 ; i < history.length ; i++) {
            top.chart.addHistoricalColumn(history[i]);
        }
        top.chart.replaceLiveColumn({ sell: "80,75", buy: "54,45,40"});
        top.chart.addChartBackground(findChart());
    }

    function addPointHistoricalColumn(column) {
        top.chart.addHistoricalColumn({ traded: column.traded, tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" } );
    }

    function assertMajorMinorBars(major, minor) {
        var chartDiv = document.getElementById("chart");
        assert_equal(minor, chartDiv.getElementsByClassName('minorBar').length);
        assert_equal(major, chartDiv.getElementsByClassName('majorBar').length);
    }

    function assertHBars(major) {
        var chartDiv = document.getElementById("chart");
        assert_equal(major, chartDiv.getElementsByClassName('hBar').length);
    }

    function assertRowLabels(count) {
        var chartTable = document.getElementById("chartTable");
        var column = chartTable.rows[1].cells[2];
        assert_equal('rightLabels', column.id);
        assert_equal(count, column.childNodes[0].childNodes.length);
    }

    tests = {
        updateStyleTest: function() {
            var element = document.createElement("div");
            updateStyle(element, { top: 37 });
            assert_equal("37px", element.style.top);
            updateStyle(element, { right: 45 });
            assert_equal("37px", element.style.top);
            assert_equal("45px", element.style.right);
        },

        clearStripChart: function() {
            assert(chart_length() > 0, "chart should have columns at start of test");
            top.chart.clear_chart();
            assert_equal(0, chart_length());
            build_test_chart_from_events();
        },

        positiontest: function() {
            var column = 3;
            var row = 2;
            var description = {x: (dotWidth + colSpace) * column, y: absoluteVPos(60) - dotHeight/2, classname: 'traded'};
            assert_equal(description, description_of_action(column, row));
        },

        verifySomePoints: function() {
            assert_point(80, 'sell',    0, 0);
            assert_point(47, 'traded',  0, 4);
            assert_point(45, 'buy',     0, 5);
            assert_point(99, 'sell',    1, 0);
            assert_point(52, 'traded',  1, 3);
            assert_point(1,  'buy',     1, 6);
            assert_point(60, 'traded',  3, 2);
            assert_point(80, 'sell',    6, 0);
            assert_point(75, 'sell',    6, 1);
            assert_point(54, 'buy',     6, 2);
            assert_point(45, 'buy',     6, 3);
            assert_point(40, 'buy',     6, 4);
        },

        regexpTest: function() {
            var a = getPrices("1,2,3");
            assert_equal(3, a.length);
            assert_equal("2", a[1]);
            assert_equal("1", a[0]);
            assert_equal("3", a[2]);

            var b = getPrices("1");
            assert_equal(1, b.length);
            assert_equal("1", b[0]);

            var c = getPrices("1,2,3,4");
            assert_equal(4, c.length);
            assert_equal("1", c[0]);
            assert_equal("2", c[1]);
            assert_equal("3", c[2]);
            assert_equal("4", c[3]);
        },

        editColumns: function() {
            assert_equal(7, chart_length());
            top.chart.replaceLiveColumn({ sell: "75,73,69", buy: "53,45,20", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            assert_equal(7, chart_length());
            addPointHistoricalColumn({ sell: "75,73,69", traded: "62", buy: "53,45,20", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            assert_equal(8, chart_length());
            top.chart.replaceLiveColumn({ sell: "75,73,69", buy: "53,45,20", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            assert_equal(8, chart_length());
        },

        clearStaticPriceList: function () {
            var offers = findOffers();
            replaceCurrentOffers(offers, { sell: "75,73,69", buy: "20,45,53"});
            assert_equal(9, offers.getElementsByTagName('tr').length)
            var firstSell = get_nth_tag(get_nth_tag(offers, 'tr', 1), 'td', 0);
            assert_equal(75, firstSell.innerHTML);
            var buyBase = 4; // label takes a position
            var firstBuy = get_nth_tag(get_nth_tag(offers, 'tr', buyBase + 1), 'td', 0);
            assert_equal(53, firstBuy.innerHTML);

            clear_offers(offers);
            assert_equal(3, offers.getElementsByTagName('tr').length)
        },

        createStaticPriceList: function () {
            var offers = findOffers();
            replaceCurrentOffers(offers, { sell: "75,73,69", buy: "20,45,53"});
            var firstSell = get_nth_tag(get_nth_tag(offers, 'tr', 1), 'td', 0);
            assert_equal(75, firstSell.innerHTML);
            var buyBase = 4; // label takes a position
            var firstBuy = get_nth_tag(get_nth_tag(offers, 'tr', buyBase + 1), 'td', 0);
            assert_equal(53, firstBuy.innerHTML);
            var thirdBuy = get_nth_tag(get_nth_tag(offers, 'tr', buyBase + 3), 'td', 0);
            assert_equal(20, thirdBuy.innerHTML);
        },

        updateStatus: function() {
            var status = "status is <b>testing</b>";
            updateStatusSection(status, 0);
            assert_equal(status, getStatusSection(0));
        },

        reloadIFrame: function() {
            var topFrame = top.frames[0];
            assert_equal('testframeNAME', topFrame.name);

            var daughterFrame = topFrame.frames[0];
            assert(daughterFrame != topFrame);
            assert_equal('testsubframeNAME', daughterFrame.name);

            var namedFrame = getNamedIFrame('testsubframeNAME');
            assert_equal('testsubframeNAME', namedFrame.name);

            assert(namedFrame === daughterFrame);
            assert(namedFrame == daughterFrame);
            assert(daughterFrame === namedFrame);
            assert(daughterFrame == namedFrame);
//            assert_equal(namedFrame, daughterFrame);  // why doesn't this pass when the previous lines do?
            var divs = namedFrame.document.getElementsByTagName('div');
            assert_equal(1, divs.length, "should be one div inside the iframe");
            assert_equal('target', divs[0].className);

            var targetDiv = namedFrame.document.getElementById('target');
            assert_equal('target', targetDiv.className);

            targetDiv.className = 'hidden';

            assert_equal('hidden', targetDiv.className);
            namedFrame.location.reload();

            namedFrame = getNamedIFrame('testsubframeNAME');
            targetDiv = namedFrame.document.getElementById('target');
//            assert_equal('target', targetDiv.className);
        },

        updateRound: function() {
            assert_equal("", getStatusSection(1));
            updateTime( { buy : "33", sell: "58" } );
            assert_equal("&nbsp;", getStatusSection(2));
            updateRound( { round : "1", timeRemaining: "2:50" } );
            assert_equal("Current " + getRoundLabel().toLowerCase() + ": 1", getStatusSection(1));
        },

        insertMarketOrderValue: function() {
            var priceInput = getNamedInput('marketOrderForm', 'marketOrderPrice');
            assert_equal(0, priceInput.value);

            updateInputValue('marketOrderForm', 'marketOrderPrice', 20);
            assert_equal(20, priceInput.value);
            updateInputValue('marketOrderForm', 'marketOrderPrice', 0);
            assert_equal(0, priceInput.value);
        },

        timeManipulation: function() {
            var event = { round: "6", timeRemaining: "0:23" };
            updateTime(event);
            assert_equal("Time Remaining: 0:23", getStatusSection(2));

            var startDate = new Date();
            var endDate = endDateFromTimeString("2:00");
            assert_equal(finishTime, endDate.getTime());
            assert_equal(2 * 60 * 1000, endDate.getTime() - startDate.getTime());
            timerID = setTimeout("timerTick()", 100);
        },

        findBestPrices: function() {
             assert_equal(33, bestBuyPrice( { buy: "33"} ));
             assert_equal(100,  bestSellPrice( { buy: "33"} ));
             assert_equal(0,  bestBuyPrice( { sell: "33"} ));
             var event = { sell: "75,73,69", buy: "20,45,53"};
             assert_equal(53, bestBuyPrice(event));
             assert_equal(69, bestSellPrice(event));
        },

        updateDisabledFlag: function() {
            var formName = 'marketOrderForm';
            var inputName = 'marketOrderPrice';
            updateDisableFlagInForm(formName, inputName, true);
            var form = document.getElementById(formName);
            assert(form.elements[inputName].disabled, "disabling flag");
            updateDisableFlagInForm(formName, inputName, false);
            assert(! form.elements[inputName].disabled, "enabling flag");
        },

        growBeyondWidthTest: function() {
            var currentColumn = { sell: "75,73,69", traded: "62", buy: "53,45,20"};
            var maxColumn = Math.round(chartWidth / (dotWidth + colSpace));
            assert_equal(8, chart_length());
            addPointHistoricalColumn(currentColumn);
            top.chart.replaceLiveColumn({ sell: "75,73,69", buy: "53,45,20"});
            assert_equal(9, chart_length());
            currentColumn = top.chart.addHistoricalColumn({ traded: "62", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "65", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "64", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "57", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "48", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "62", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            assert_equal(15, chart_length());
            currentColumn = top.chart.addHistoricalColumn({ traded: "65", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "64", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "57", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "48", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "62", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "65", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "64", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "57", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "48", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "62", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            assert_equal(25, chart_length());
            currentColumn = top.chart.addHistoricalColumn({ traded: "65", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "64", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "57", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "48", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "62", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "65", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "64", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "57", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "58", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "48", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            assert_equal(35, chart_length());
            currentColumn = top.chart.addHistoricalColumn({ traded: "65", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "64", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "57", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "48", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "62", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "65", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "64", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "57", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "52", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            assert_equal(Math.min(maxColumn, 44), chart_length());
            currentColumn = top.chart.addHistoricalColumn({ traded: "48", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            assert_equal(Math.min(maxColumn, 45), chart_length());
            currentColumn = top.chart.addHistoricalColumn({ traded: "65", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "64", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "57", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            assert_equal(Math.min(maxColumn, 48), chart_length());
            currentColumn = top.chart.addHistoricalColumn({ traded: "48", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "48", tradeType: "net.commerce.zocalo.ajax.events.LimitTrade" });
            assert_equal(Math.min(maxColumn, 50), chart_length());
            assert_equal(maxColumn, chart_length());

            assert(chart_length() <= maxColumn);
        },

        scaleChartLabelsTest: function() {
            setDivValues(60, 10, 0);
            assert_equal("20", top.chart.getRowLabel(0, 4));
            assert_equal("20", top.chart.getRowLabel(1, 4));
            assert_equal("10", top.chart.getRowLabel(1, 5));
            assert_equal("50", top.chart.getRowLabel(0, 1));
            setDivValues(100, 5, 0);
        },

        scaleChart: function() {
            assert_equal(maxPrice, 100);
            var height50 = 50;
            var height200 = 200;
            var height100 = 100;
            var height50Normal = absoluteVPos(50);
            assert_equal(dotSpacing, 4);
            assert_equal(200, height50Normal);

            setDivValues(height50, 5, 0);
            assert_equal(height50Normal, absoluteVPos(25));

            setDivValues(height200, 5, 0);
            assert_equal(2, dotSpacing);
            assert_equal(height50Normal, absoluteVPos(100));
        },

        resetTo1000: function() {
            setDivValues(1000, 5, 0);
            var currentColumn = top.chart.addHistoricalColumn({ traded: "365" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "464" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "207" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "748" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "962" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "365" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "664" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "557" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "152" });
            assert_equal(50, chart_length());
            setDivValues(1000, 10, 5);
        },

        rescalingtest: function() {
            setDivValues(900, 50, 0);
            assertRowLabels(17);
            assertHBars(17);
            var currentColumn = top.chart.addHistoricalColumn({ traded: "365" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "365" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "664" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "557" });
            currentColumn = top.chart.addHistoricalColumn({ traded: "152" });
            setDivValues(500, 100, 50);
            assertRowLabels(4);
            assertMajorMinorBars(4, 5);
        },

        rescalingtest2: function() {
            setDivValues(300, 50, 15);
            assertRowLabels(5);
            assertMajorMinorBars(5, 20 - 1 - 1);
        },

        resestChart: function() {
            setDivValues(100, 10, 5);
            assertRowLabels(9);
            assertMajorMinorBars(9, 10);
        },
    }

    function onload_actions() {
        build_test_chart_from_events();
        barebones_run_tests();
    }

</script>

<a href="/Stuff/IF-java/test/jstest/jstest-v1.js">test framework</a>

<h1> strip chart test </h1>

<table> <tbody>
  <tr>
    <td width="620">
        <table id="chartTable"> <tbody>
            <tr><td colspan=4 align=center>
                  <div class="experimentStatus" id="experimentStatus"><p><br><br></p></div>
                </td>
            </tr>
            <tr>
                <td id=leftLabels width=20><div style="position: relative; top: -208;">
                  <div style="position: absolute; top:40;">90</div>
                  <div style="position: absolute; top:80;">80</div>
                  <div style="position: absolute; top:120;">70</div>
                  <div style="position: absolute; top:160;">60</div>
                  <div style="position: absolute; top:200;">50</div>
                  <div style="position: absolute; top:240;">40</div>
                  <div style="position: absolute; top:280;">30</div>
                  <div style="position: absolute; top:320;">20</div>
                  <div style="position: absolute; top:360;">10</div>
                    </div>
                </td>
                <td>
                <div class="chart" id="chart">
                </div>
                </td>
                <td width=20 id=rightLabels><div style="position: absolute; top: 179;">
                  <div style="position: absolute; top:40;">90</div>
                  <div style="position: absolute; top:80;">80</div>
                  <div style="position: absolute; top:120;">70</div>
                  <div style="position: absolute; top:160;">60</div>
                  <div style="position: absolute; top:200;">50</div>
                  <div style="position: absolute; top:240;">40</div>
                  <div style="position: absolute; top:280;">30</div>
                  <div style="position: absolute; top:320;">20</div>
                  <div style="position: absolute; top:360;">10</div>
                    </div>
                </td>
                <td>
                    <div class="offers" id="offers"></div>
                </td>
            </tr>
        </tbody></table>
    </td>
    <td>
        <div class="subframe">
            <iframe id="testframeID" name="testframeNAME" width="250" height="250" border="0" src="testTargetParentFrame.html">
            </iframe>
        </div>
    <br><p>
        <div>
            <form align=center class='marketOrderForm' id='marketOrderForm'>
                <input type=hidden name=marketOrderPrice id=marketOrderPrice>
                <input type=submit name=action>
            </form>
        </div>
    </td>

  </tr>

</tbody></table>
<div id=scale class="100" />
<div id="minorUnit" class="5"/>
<div id="majorUnit" class="10"/>
<div id="maxPrice" class="100"/>
</body>
</html>
